<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Recommendations</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="qrc:///web/css/jquery.mobile-1.4.5.min.css" />
<script src="qrc:///web/js/jquery-1.11.1.min.js"></script>
<script src="qrc:///web/js/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="qrc:///web/recommendation/main.css" />

<script src="qrc:///web/js/color-thief.min.js"></script>
<link rel="stylesheet" href="qrc:///web/scroll.css" />
<script src="qrc:///web/js/common.js"></script>
<script src="qrc:///web/recommendation/main.js"></script>


</head>
<!-- oncontextmenu="return false;" -->
<body  onselectstart="return false;" ondragstart="return false;" ondrop="return false;">

    <img style="display:none;" src="" id="coverImage" />
    <div class="ui-loader-background"> </div>

    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle='false'>
        <div  data-role="tabs" id="tabs">
            <div data-role="navbar">
              <ul>
                <li><a onclick="$.mobile.changePage($('#recommendation_page'));" id="overview" >RECOMMENDATION</a></li>
                <li><a onclick="$.mobile.changePage($('#top_list_page'));if(top_list_loaded == false)load_toplist();" id="new_releases" >FRESH</a></li>
              </ul>
            </div>
         </div> <!--tabs-->
    </div><!-- /header -->

    <div id="recommendation_page" data-role="page" data-theme="b" data-title="RECOMMENDATION">
        <div role="main" class="ui-content">
            <input class="ui-icon-alt"  type="search" id='manual_search' value='' placeholder="Type a song name, ex- the river - aurora">
            <ul   class="list" id="recommendation_page_suggestions"  data-filter="true" data-input="#manual_search"  data-role="listview" data-split-icon="bars" data-split-theme="b" data-inset="true">
            <!-- load suggestions here -->
            </ul>
                <div id="result_div"  style="visibility:hidden;">
                    <div id="HEADER_DIV" style="text-align:center;background-position: center;text-shadow: 1px 3px 14px rgb(0, 0, 0);box-shadow:rgb(0, 0, 0) 0px 0px 30px;">
                        <div id="HEADER_WRAPPER" style="background-color:rgba(0, 0, 0, 0.27);padding-bottom:25px;">
                            <h2 style="padding:10px;background-color:rgba(0,0,0,0.53)" >Recommendations</h2>
                            <div id="wrapper" style="margin:0 auto;width:200px;height:200px;" onMouseOver="show_playOriginal()" onMouseOut="hide_playOriginal()">
                                <img style="max-height:200px;max-width:200px; box-shadow:3px 10px 14px 7px rgb(0, 0, 0);opacity: 0.8;" id="ALBUM_ART"/>
                                <a href="#" id="playOriginalButton" style="height:100%;line-height:200px;text-decoration:none;display:block;" >
                                   <div style="visibility:hidden;" id="playOriginal">
                                        <p>Add this track</p>
                                    </div>
                                </a>
                            </div>
                            <br>
                            <p style="display: block;background-color: rgba(0, 0, 0, 0.53);padding: 12px;bottom: -41px;position: relative;">
                                <b>Based on : </b><b id="BASETRACK"></b>
                                <br>
                            </p>
                        </div>
                    </div>
                    <hr>
                    <h5 style="margin: 0px 0px -12px 0px;">Tracks:</h5>

                    <ul class="list" id="tracks_result_view" data-role="listview" data-split-icon="bars" data-split-theme="b" data-inset="true">
                        <!-- load result here -->
                    </ul>

                </div>
            <hr>
        </div>
    </div>


    <div id="top_list_page" data-role="page" data-theme="b" data-title="FRESH">
        <div role="main" class="ui-content">
        <div id="trending_div">
            <h5 style="margin: 2px 0px 5px 5px;" id="history_valid">Recommended Music :</h5>
            <div class="ui-bar ui-bar-b ui-loader-trending" style="margin-top: 25px;text-align: center;margin-left:6px !important;"><i>Loading content please wait...</i></div>
            <div id="trending">

            </div>
        </div>
        </div>
    </div>



    <div id="album_view_page" data-role="page" data-theme="b" data-title="ALBUMS VIEW">
        <div role="main" class="ui-content">
            <!--load data here-->
        </div>
        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <a style="display: block;background-color: rgba(36, 142, 179, 0.5)"  class="ui-mini ui-btn ui-icon-back ui-btn-icon-left ui-corner-all" data-transition="slidefade" data-rel="back" href="#">Back to Recommendations</a>
        </div><!-- /footer -->
    </div>

</body>
</html>
